<template>
  <div style="position: relative; width: 100%; height: 100%">
    <div style="display: flex; align-items: center">
      <div
        @click="sendPokerToPlayer"
        style="
          margin: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100px;
          height: 40px;
          border-radius: 10px;
          border: 1px solid #2346ff;
          background-color: aqua;
          user-select: none;
          cursor: pointer;
        "
      >
        发牌
      </div>
      <div
        @click="playerNumChange(-1)"
        style="
          margin: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100px;
          height: 40px;
          border-radius: 10px;
          border: 1px solid #2346ff;
          background-color: aqua;
          user-select: none;
          cursor: pointer;
        "
      >
        玩家-1
      </div>
      <div
        @click="playerNumChange(1)"
        style="
          margin: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100px;
          height: 40px;
          border-radius: 10px;
          border: 1px solid #2346ff;
          background-color: aqua;
          user-select: none;
          cursor: pointer;
        "
      >
        玩家+1
      </div>
      <div>
        当前玩家:
        <span style="color: #fff">{{ playerNum }}</span> 位
      </div>
    </div>

    <!-- 展示发出的牌 -->
    <div style="display: flex; align-items: center; flex-wrap: wrap">
      <div
        style="margin: 10px; padding: 10px; border: 1px solid #44ff65"
        v-for="(pokers, index) of playerPoker"
        :key="index"
      >
        <div style="margin-bottom: 6px;">玩家{{ index + 1 }}:</div>
        <div style="display: flex; align-items: center">
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
              padding: 10px;
              background-color: #fff;
              border-radius: 5px;
            "
            v-for="(poker, pokerIndex) of pokers"
            :key="poker.id"
            :style="{ margin: pokerIndex == 1 ? '0 10px' : '' }"
          >

            <!-- 花色 -->
            <div v-if="poker.typeNum == 0" style="color: red; font-size: 26px">
              ♥
            </div>
            <div v-if="poker.typeNum == 1" style="font-size: 26px">♣</div>
            <div v-if="poker.typeNum == 2" style="color: red; font-size: 26px">
              ♦
            </div>
            <div v-if="poker.typeNum == 3" style="font-size: 26px">♠</div>
            <!-- 数字 -->
            <div v-if="poker.num == 1">A</div>
            <div v-if="poker.num <= 10 && poker.num > 1">{{ poker.num }}</div>
            <div v-if="poker.num == 11">J</div>
            <div v-if="poker.num == 12">Q</div>
            <div v-if="poker.num == 13">K</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      wholePoker: [],
      // 玩家人数
      playerNum: 5,
      playerPoker: [],
    };
  },
  methods: {
    // 玩家人数change
    playerNumChange(num) {
      console.log(num);
      this.playerNum += num;
      if (this.playerNum == 1 || this.playerNum == 18) {
        this.playerNum -= num;
      }
      this.playerPoker = [];
    },
    // 获取所有牌
    getWholePocker() {
      let pockerType = ["heart", "spade", "diamond", "club"];

      for (let i = 0; i < pockerType.length; i++) {
        for (let j = 1; j <= 13; j++) {
          this.wholePoker.push({
            type: pockerType[i],
            typeNum: i,
            num: j,
            id: this.wholePoker.length + 1,
          });
        }
      }

    // console.log(this.wholePoker);
    },
    // 发牌
    sendPokerToPlayer() {
      console.log("发牌");

      let pokerArr = this.getRandomPoker([], this.playerNum * 3);

      for (let i = 0; i < this.playerNum; i++) {
        let card1 = pokerArr[i];
        let card2 = pokerArr[i + this.playerNum];
        let card3 = pokerArr[i + this.playerNum * 2];
        this.playerPoker[i] = [card1, card2, card3];
      }
      this.$forceUpdate();
    },
    // 获取随机牌
    getRandomPoker(list, num) {
      if (list.length != num) {
        let pokernum = Math.floor(Math.random() * this.wholePoker.length);
        let poker = this.wholePoker[pokernum];
        if (
          !list.find((item) => {
            return item.type == poker.type && item.num == poker.num;
          })
        ) {
          list.push(poker);
        }
        return this.getRandomPoker(list, num);
      } else {
        return list;
      }
    },
  },
  mounted() {
    this.getWholePocker();
  },
};
</script>

<style scoped>
</style>